<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="8">
                <el-card shadow="hover" class="mgb20" style="height:252px;">
                    <div class="user-info">
                        <img src="../../assets/img/img.jpg" class="user-avator" alt />
                        <div class="user-info-cont">
                            <div class="user-info-name">{{name}}</div>
                            <div>{{role}}</div>
                        </div>
                    </div>
                    <div class="user-info-list">
                        上次登录时间：
                        <span>2021-06-01</span>
                    </div>
                    <div class="user-info-list">
                        上次登录地点：
                        <span>永州</span>
                    </div>
                </el-card>
                <el-card shadow="hover" style="height:252px;">
                    <div slot="header" class="clearfix">
                        <span style="color: red;font-size: 25px">智能预警</span>
                    </div>
                    <el-alert
                            title="温度异常:A猪舍->38摄氏度"
                            type="warning"
                            close-text="知道了">
                    </el-alert>
                    <el-alert
                            title='猪的体温异常 A猪舍:01栏->38摄氏度'
                            type="warning"
                            close-text="知道了"
                            >
                    </el-alert>
                </el-card>
            </el-col>
            <el-col :span="16">
                <el-row :gutter="20" class="mgb20">
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{padding: '0px'}">
                            <div class="grid-content grid-con-1">
                                <i class="el-icon-lx-people grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">1234</div>
                                    <div>用户访问量</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{padding: '0px'}">
                            <div class="grid-content grid-con-2">
                                <i class="el-icon-lx-notice grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">321</div>
                                    <div>系统消息</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{padding: '0px'}">
                            <div class="grid-content grid-con-3">
                                <i class="el-icon-lx-goods grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">5000</div>
                                    <div>数量</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
<!--                待配种表格-->
                <el-card shadow="hover" style="height:403px;">
                    <div slot="header" class="clearfix">
                        <span>待配种</span>
                        <el-button style="float: right; padding: 3px 0" type="text">添加</el-button>
                    </div>
                    <el-table
                            :data="matingInfo"
                            height="350"
                            style="width: 100%">
                        <el-table-column type="expand">
                            <template slot-scope="props">
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <el-form-item label="种猪状态">
                                        <span>{{ props.row.sowStatus }}</span>
                                    </el-form-item>
                                    <el-form-item label="日龄">
                                        <span>{{ props.row.ageDay }}</span>
                                    </el-form-item>
                                    <el-form-item label="怀孕胎次">
                                        <span>{{ props.row.pregnancyParity }}</span>
                                    </el-form-item>
                                    <el-form-item label="发情时间">
                                        <span>{{ props.row.estrusTime }}</span>
                                    </el-form-item>

                                </el-form>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="耳标"
                                prop="pigId">
                        </el-table-column>
                        <el-table-column
                                label="所在位置"
                                prop="address">
                        </el-table-column>
                        <el-table-column
                                label="备注"
                                prop="remark">
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
        </el-row>

        <el-row >
            <div style="display:flex; justify-content:center;flex-wrap:wrap;" class="agentInfo">

                <!--                待喂食表格-->
                <el-card shadow="hover" style="height:403px;width: 45%;margin-right: 5%">
                    <div slot="header" class="clearfix">
                        <span>待喂食</span>
                        <el-button style="float: right; padding: 3px 0" type="text">添加</el-button>
                    </div>
                    <el-table
                            :data="fedInfo"
                            height="350"
                            style="width: 100%">
                        <el-table-column type="expand">
                            <template slot-scope="props">
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <el-form-item label="猪只状态">
                                        <span>{{ props.row.sowStatus }}</span>
                                    </el-form-item>
                                    <el-form-item label="日龄">
                                        <span>{{ props.row.ageDay }}</span>
                                    </el-form-item>
                                    <el-form-item label="所在位置">
                                        <span>{{ props.row.pigWhere }}</span>
                                    </el-form-item>
                                    <el-form-item label="饲料种类">
                                        <span>{{ props.row.feedTypee }}</span>
                                    </el-form-item>

                                </el-form>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="耳标"
                                prop="pigId">
                        </el-table-column>
                        <el-table-column
                                label="猪只类型"
                                prop="pigType">
                        </el-table-column>
                        <el-table-column
                                label="备注"
                                prop="remark">
                        </el-table-column>
                    </el-table>
                </el-card>
                <!--待执行表格-->
                <el-card shadow="hover" style="height:403px;width: 45%">
                    <div slot="header" class="clearfix">
                        <span>待执行</span>
                        <el-button style="float: right; padding: 3px 0" type="text">添加</el-button>
                    </div>
                    <el-table
                            :data="executeInfo"
                            height="350"
                            style="width: 100%">
                        <el-table-column type="expand">
                            <template slot-scope="props">
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <el-form-item label="猪只状态">
                                        <span>{{ props.row.pigStatus }}</span>
                                    </el-form-item>
                                    <el-form-item label="日龄">
                                        <span>{{ props.row.ageDay }}</span>
                                    </el-form-item>
                                    <el-form-item label="所在位置">
                                        <span>{{ props.row.pigWhere }}</span>
                                    </el-form-item>
                                    <el-form-item label="剩余执行时间">
                                        <span>{{ props.row.executionTime }}</span>
                                    </el-form-item>

                                </el-form>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="执行内容"
                                prop="contentExecution">
                        </el-table-column>
                        <el-table-column
                                label="耳标"
                                prop="pigId">
                        </el-table-column>
                        <el-table-column
                                label="备注"
                                prop="remark">
                        </el-table-column>
                    </el-table>
                </el-card>

                <!--                待售卖表格-->
                <el-card shadow="hover" style="height:403px;width: 45%;margin-right: 5%">
                    <div slot="header" class="clearfix">
                        <span>待售卖</span>
                        <el-button style="float: right; padding: 3px 0" type="text">添加</el-button>
                    </div>
                    <el-table
                            :data="saleInfo"
                            height="350"
                            style="width: 100%">
                        <el-table-column type="expand">
                            <template slot-scope="props">
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <el-form-item label="猪只状态">
                                        <span>{{ props.row.pigStatus }}</span>
                                    </el-form-item>
                                    <el-form-item label="日龄">
                                        <span>{{ props.row.ageDay }}</span>
                                    </el-form-item>
                                    <el-form-item label="所在位置">
                                        <span>{{ props.row.pigWhere }}</span>
                                    </el-form-item>
                                    <el-form-item label="体重">
                                        <span>{{ props.row.pigWeight }}</span>
                                    </el-form-item>

                                </el-form>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="耳标"
                                prop="pigId">
                        </el-table-column>
                        <el-table-column
                                label="猪只类型"
                                prop="pigType">
                        </el-table-column>
                        <el-table-column
                                label="备注"
                                prop="remark">
                        </el-table-column>
                    </el-table>
                </el-card>
<!--                待消毒表格-->
                <el-card shadow="hover" style="height:403px;width: 45%">
                    <div slot="header" class="clearfix">
                        <span>待消毒</span>
                        <el-button style="float: right; padding: 3px 0" type="text">添加</el-button>
                    </div>
                    <el-table
                            :data="disinfectInfo"
                            height="350"
                            style="width: 100%">
                        <el-table-column type="expand">
                            <template slot-scope="props">
                                <el-form label-position="left" inline class="demo-table-expand">

                                    <el-form-item label="所在位置">
                                        <span>{{ props.row.pigWhere }}</span>
                                    </el-form-item>
                                    <el-form-item label="备注">
                                        <span>{{ props.row.remark }}</span>
                                    </el-form-item>

                                </el-form>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="日期"
                                prop="dateTime">
                        </el-table-column>
                        <el-table-column
                                label="编号"
                                prop="id">
                        </el-table-column>
                        <el-table-column
                                label="消毒类型"
                                prop="disinfectionType">
                        </el-table-column>
                    </el-table>
                </el-card>

            </div>
        </el-row>

        <el-row :gutter="20">
            <el-col :span="12">
                <el-card shadow="hover">
                    <schart ref="bar" class="schart" canvasId="bar" :options="options"></schart>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card shadow="hover">
                    <schart ref="line" class="schart" canvasId="line" :options="options2"></schart>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Schart from 'vue-schart';
import bus from '../common/bus';
export default {
    name: 'dashboard',
    data() {
        return {
            name: localStorage.getItem('ms_username'),
            //待消毒表格
            disinfectInfo:[
                {
                    dateTime:"2021-6-1",
                    id:"2323",
                    disinfectionType:"器皿",
                    pigWhere:"B舍栋-12栏",
                    remark:"剪刀"
                },
                {
                    dateTime:"2021-6-1",
                    id:"2323",
                    disinfectionType:"器皿",
                    pigWhere:"B舍栋-12栏",
                    remark:"注射器"
                },
                {
                    dateTime:"2021-6-1",
                    id:"湘-A-10002",
                    disinfectionType:"车辆",
                    pigWhere:"未进场",
                    remark:"外出"
                },
                {
                    dateTime:"2021-6-1",
                    id:"10001",
                    disinfectionType:"人员",
                    pigWhere:"A社栋",
                    remark:"无备注"
                },
            ],
            //待售卖信息
            saleInfo:[
                {
                    pigId:"3434",
                    pigType:"育肥猪",
                    remark:"备注",
                    pigStatus:"健康",
                    ageDay:"123",
                    pigWhere:"B舍栋-12栏",
                    pigWeight:"201"
                },
                {
                    pigId:"2450",
                    pigType:"育肥猪",
                    remark:"备注",
                    pigStatus:"健康",
                    ageDay:"123",
                    pigWhere:"B舍栋-12栏",
                    pigWeight:"230"
                },
                {
                    pigId:"3423",
                    pigType:"育肥猪",
                    remark:"备注",
                    pigStatus:"健康",
                    ageDay:"130",
                    pigWhere:"B舍栋-13栏",
                    pigWeight:"210"
                },{
                    pigId:"3436",
                    pigType:"育肥猪",
                    remark:"备注",
                    pigStatus:"健康",
                    ageDay:"123",
                    pigWhere:"B舍栋-13栏",
                    pigWeight:"211"
                }
            ],
            //待执行表格
            executeInfo:[
                {
                    contentExecution:"断奶",
                    pigId:"1234",
                    remark:"无备注",
                    pigStatus:"健康",
                    ageDay:"13",
                    pigWhere:"A舍栋-12栏",
                    executionTime:"2天"
                },
                {
                    contentExecution:"剪尾",
                    pigId:"1235",
                    remark:"无备注",
                    pigStatus:"健康",
                    ageDay:"8",
                    pigWhere:"A舍栋-13栏",
                    executionTime:"3天"
                },
                {
                    contentExecution:"去势",
                    pigId:"1234",
                    remark:"无备注",
                    pigStatus:"健康",
                    ageDay:"13",
                    pigWhere:"A舍栋-12栏",
                    executionTime:"2天"
                }
            ],
            //待喂食信息
            fedInfo:[
                {
                    pigId:"8890",
                    pigType:"怀孕母猪",
                    remark:"怀孕30天",
                    sowStatus:"健康",
                    ageDay:"130",
                    pigWhere:"A舍栋-12栏",
                    feedTypee:"怀孕料"
                },
                {
                    pigId:"10004",
                    pigType:"怀孕母猪",
                    remark:"怀孕92天",
                    sowStatus:"健康",
                    ageDay:"143",
                    pigWhere:"A舍栋-15栏",
                    feedTypee:"哺乳料"
                },
                {
                    pigId:"10032",
                    pigType:"仔猪",
                    remark:"无备注",
                    sowStatus:"健康",
                    ageDay:"15",
                    pigWhere:"B舍栋-01栏",
                    feedTypee:"教槽料"
                }
            ],
            //待配种信息
            matingInfo: [{
                pigId:"10023",
                address:"A舍栋-03栏",
                remark:"无备注",
                sowStatus: '：后备母猪',
                ageDay: '：105',
                pregnancyParity: '：2',
                estrusTime: '：2021-05-30',

            },
                {
                    pigId:"23002",
                    address:"A舍栋-04栏",
                    remark:"无备注",
                sowStatus: '：后备母猪',
                ageDay: '：108',
                pregnancyParity: '：1',
                estrusTime: '：2021-05-29',

            },
                {
                    pigId:"22321",
                    address:"A舍栋-03栏",
                    remark:"无备注",
                sowStatus: '：生产母猪',
                ageDay: '：154',
                pregnancyParity: '：1',
                estrusTime: '：2021-06-01',

            },
                {
                    pigId:"22327",
                    address:"A舍栋-06栏",
                    remark:"无备注",
                sowStatus: '：生产公猪',
                ageDay: '：180',
                pregnancyParity: '：3',
                estrusTime: '：2021-06-01',

            }],
            data: [
                {
                    name: '2018/09/04',
                    value: 1083
                },
                {
                    name: '2018/09/05',
                    value: 941
                },
                {
                    name: '2018/09/06',
                    value: 1139
                },
                {
                    name: '2018/09/07',
                    value: 816
                },
                {
                    name: '2018/09/08',
                    value: 327
                },
                {
                    name: '2018/09/09',
                    value: 228
                },
                {
                    name: '2018/09/10',
                    value: 1065
                }
            ],
            options: {
                type: 'bar',
                title: {
                    text: '最近一周财务支出'
                },
                xRorate: 25,
                labels: ['周一', '周二', '周三', '周四', '周五'],
                datasets: [
                    {
                        label: '饲料',
                        data: [234, 278, 270, 190, 230]
                    },
                    {
                        label: '药品',
                        data: [164, 178, 190, 135, 160]
                    },
                    {
                        label: '其他',
                        data: [144, 198, 150, 235, 120]
                    }
                ]
            },
            options2: {
                type: 'line',
                title: {
                    text: '最近几个月猪销售统计表'
                },
                labels: ['6月', '7月', '8月', '9月', '10月'],
                datasets: [
                    {
                        label: '仔猪',
                        data: [234, 278, 270, 190, 230]
                    },
                    {
                        label: '育肥猪',
                        data: [164, 178, 150, 135, 160]
                    },
                    {
                        label: '淘汰种猪',
                        data: [74, 118, 200, 235, 90]
                    }
                ]
            }
        };
    },
    components: {
        Schart
    },
    computed: {
        role() {
            return this.name === 'admin' ? '超级管理员' : '普通用户';
        }
    },
    // created() {
    //     this.handleListener();
    //     this.changeDate();
    // },
    // activated() {
    //     this.handleListener();
    // },
    // deactivated() {
    //     window.removeEventListener('resize', this.renderChart);
    //     bus.$off('collapse', this.handleBus);
    // },
    methods: {
        hello() {
            alert('Hello World!');
        },
        changeDate() {
            const now = new Date().getTime();
            this.data.forEach((item, index) => {
                const date = new Date(now - (6 - index) * 86400000);
                item.name = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
            });
        }
        // handleListener() {
        //     bus.$on('collapse', this.handleBus);
        //     // 调用renderChart方法对图表进行重新渲染
        //     window.addEventListener('resize', this.renderChart);
        // },
        // handleBus(msg) {
        //     setTimeout(() => {
        //         this.renderChart();
        //     }, 200);
        // },
        // renderChart() {
        //     this.$refs.bar.renderChart();
        //     this.$refs.line.renderChart();
        // }
    }
};
</script>


<style scoped>
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
.agentInfo el-card{
    flex-grow:2;
}

.el-row {
    margin-bottom: 20px;
}

.grid-content {
    display: flex;
    align-items: center;
    height: 100px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
}

.user-info-list span {
    margin-left: 70px;
}

.mgb20 {
    margin-bottom: 20px;
}

.todo-item {
    font-size: 14px;
}

.todo-item-del {
    text-decoration: line-through;
    color: #999;
}

.schart {
    width: 100%;
    height: 300px;
}
</style>
